<div class="layui-card">
    <div class="layui-card-header">检索条件</div>
    <div class="layui-card-body">
        <form id="role-query-form" class="layui-form layui-form-pane" action="">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">参数名称</label>
                    <div class="layui-input-inline">
                        <input name="codeName" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">参数键名</label>
                    <div class="layui-input-inline">
                        <input name="codeKey" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">系统内置</label>
                    <div class="layui-input-inline">
                        <select name="codeType">
                            <option value="">请选择</option>
                            <option th:each="dict,roleStat:${codeTypeList}" th:value="${dict.dataCode}" th:text="${dict.dataText}"></option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">创建时间</label>
                    <div class="layui-input-inline">
                        <input name="createTimeBetween" id="createTime" placeholder="请选择" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <button class="layui-btn" lay-filter="code-query-submit" lay-submit><i class="layui-icon">&#xe615;</i> 检索</button>
            </div>
        </form>
    </div>
</div>

<div class="layui-card">
    <!-- <div class="layui-card-header">
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm" id="btnAdd"><i class="layui-icon">&#xe654;</i> 增加</button>
            <button class="layui-btn layui-btn-sm layui-btn-disabled" id="btnDel" disabled="true">
            	<i class="layui-icon">&#xe640;</i> 删除
            </button>
        </div>
    </div> -->
    <div class="layui-card-body" style="padding-top: 0px;">
        <table class="layui-table" id="code-table" lay-filter="code-table"></table>
    </div>
</div>

<script type="text/html" id="code-tool-bar">
	<div>
		<button class="layui-btn" id="btnAdd"><i class="layui-icon">&#xe654;</i> 增加</button>
	</div>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="code-table-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

<!-- 是否可见列 -->
<script type="text/html" id="codeTypeText">
    {{#  if(d.codeType === '0'){ }}
        <span class="layui-badge layui-bg-black" style="border-radius: 100px;">{{ d.codeTypeText }}</span>
    {{#  } else if(d.codeType === '1'){ }}
        <span class="layui-badge layui-bg-gray" style="border-radius: 100px;">{{ d.codeTypeText }}</span>
    {{#  } }}
</script>

<script>
    layui.use(['jquery', 'form', 'table', 'util', 'sadmin', 'element', 'laydate'], function () {
        var $ = layui.$ //重点处
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var util = layui.util;
        var sadmin = layui.sadmin;
        var element = layui.element;
        var laydate = layui.laydate;

        form.render('select');
        
      	// 渲染日期
        laydate.render({
            elem: '#createTime',
            theme: '#393D49',
            range: '~'
        });

        // 渲染表格
        table.render({
            elem: '#code-table',
            url: 'system/code/pageList',
            toolbar: '#code-tool-bar',
            defaultToolbar: ['filter', 'exports'],
            skin: 'line',
            page: true,
            cols: [
                [
                    {type:'checkbox', fixed: 'left'},
                    {type: 'numbers', title: '序号'},
                    {field: 'codeName', sort: true, title: '参数名称'},
                    {field: 'codeKey', width: 200, align: 'center', title: '参数键名'},
                    {field: 'codeValue', title: '参数键值'},
                    {field: 'codeType', width: 100, title: '系统内置', templet: '#codeTypeText', align: 'center'},
                    {
                    	field: 'createTime',align: 'center', templet: function (d) {
                            return util.toDateString(d.createTime.time);
                        }, title: '创建时间'
                    },
                    {align: 'center', width: 180, toolbar: '#code-table-bar', fixed: 'right', title: '操作'}
                ]
            ]
        });

        // 添加按钮点击事件
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 工具条点击事件
        table.on('tool(code-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'edit') { // 修改
                showEditModel(data);
            }
            else if (layEvent === 'delete') { //删除
            	deleteDataByPid(data);
            }
        });
        
        // 删除列表数据
        var deleteDataByPid = function(data) {
        	layer.confirm('确定删除所选数据吗？', function (i) {
                layer.close(i);
                layer.load(2);
                $.post('system/code/drop', {
                    dataPid: data.pid
                }, function (result) {
                    layer.closeAll('loading');
                    layer.msg(result.msg);
                    table.reload('code-table', {});
                });
            });
        }

        // 显示表单弹窗
        var showEditModel = function (data) {
            console.log(data);
            var title = data ? '修改参数' : '添加参数';
            sadmin.putTempData('system_code', data);
            sadmin.popupCenter({
                title: title,
                /* area: ['550px', '350px'], */
                path: '/system/code/form',
                finish: function () {
                    table.reload('code-table', {});
                }
            });
        };

        // 搜索提交事件
        form.on('submit(code-query-submit)', function (data) {
            table.reload('code-table', {
                where: data.field
            });
            return false;
        });

    });
</script>